/**
 * 线路产品管理页面交互脚本
 * 基于Apple Design Guidelines
 * 文件：product-management.js
 */

// 模块状态管理
const ProductModule = {
    // 当前选中的产品
    selectedProducts: new Set(),
    
    // 模态框状态
    modals: {
        pricing: null,
        inventory: null,
        productForm: null
    },
    
    // 筛选器状态
    filters: {
        category: '',
        status: '',
        sort: 'created_desc',
        search: ''
    },
    
    // 分页状态
    pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
    }
};

// DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initProductManagement();
});

/**
 * 初始化产品管理页面
 */
function initProductManagement() {
    console.log('初始化线路产品管理页面...');
    
    // 初始化事件监听器
    initEventListeners();
    
    // 初始化筛选器
    initFilters();
    
    // 初始化表格
    initProductTable();
    
    // 加载模态框组件
    loadModalComponents();
    
    console.log('产品管理页面初始化完成');
}

/**
 * 初始化事件监听器
 */
function initEventListeners() {
    // 搜索框事件
    const searchInput = document.querySelector('.search-input');
    if (searchInput) {
        let searchTimeout;
        searchInput.addEventListener('input', function(e) {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                ProductModule.filters.search = e.target.value;
                filterProducts();
            }, 300);
        });
    }
    
    // 筛选器事件
    ['categoryFilter', 'statusFilter', 'sortFilter'].forEach(filterId => {
        const filter = document.getElementById(filterId);
        if (filter) {
            filter.addEventListener('change', function(e) {
                const filterType = filterId.replace('Filter', '');
                ProductModule.filters[filterType] = e.target.value;
                filterProducts();
            });
        }
    });
    
    // 全选框事件
    const selectAllCheckbox = document.getElementById('selectAll');
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function(e) {
            toggleSelectAll(e.target.checked);
        });
    }
    
    // 批量操作事件
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('product-checkbox')) {
            updateProductSelection(e.target.value, e.target.checked);
        }
    });
    
    // 下拉菜单事件
    document.addEventListener('click', function(e) {
        if (e.target.closest('.dropdown-toggle')) {
            e.preventDefault();
            toggleDropdown(e.target.closest('.dropdown'));
        } else {
            closeAllDropdowns();
        }
    });
    
    // ESC键关闭模态框
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeAllModals();
        }
    });
}

/**
 * 初始化筛选器
 */
function initFilters() {
    console.log('初始化筛选器...');
    
    // 重置筛选器按钮
    const resetBtn = document.querySelector('button[onclick="resetFilters()"]');
    if (resetBtn) {
        resetBtn.addEventListener('click', function(e) {
            e.preventDefault();
            resetFilters();
        });
    }
}

/**
 * 重置筛选器
 */
function resetFilters() {
    console.log('重置筛选器');
    
    // 重置筛选器状态
    ProductModule.filters = {
        category: '',
        status: '',
        sort: 'created_desc',
        search: ''
    };
    
    // 重置UI状态
    document.querySelector('.search-input').value = '';
    document.getElementById('categoryFilter').value = '';
    document.getElementById('statusFilter').value = '';
    document.getElementById('sortFilter').value = 'created_desc';
    
    // 重新加载数据
    filterProducts();
}

/**
 * 筛选产品
 */
function filterProducts() {
    console.log('筛选产品:', ProductModule.filters);
    
    // 显示加载状态
    showTableLoading();
    
    // 模拟API调用
    setTimeout(() => {
        // 这里应该调用实际的API
        loadProductData();
        hideTableLoading();
    }, 500);
}

/**
 * 初始化产品表格
 */
function initProductTable() {
    console.log('初始化产品表格...');
    
    // 加载产品数据
    loadProductData();
}

/**
 * 加载产品数据
 */
function loadProductData() {
    console.log('加载产品数据...');
    
    // 这里应该是实际的API调用
    // 现在使用模拟数据
    const mockData = getMockProductData();
    
    // 渲染表格
    renderProductTable(mockData);
    
    // 更新分页
    updatePagination(mockData.total);
}

/**
 * 获取模拟产品数据
 */
function getMockProductData() {
    return {
        data: [
            {
                id: 'PRD202501001',
                name: '桂林山水精品3日游',
                subtitle: '漓江竹筏+象鼻山+银子岩',
                category: { main: '国内游', sub: '华南线 / 广西' },
                price: 1280,
                inventory: { current: 28, total: 40, status: 'active' },
                status: 'active',
                sales: { count: 156, trend: '+12%' },
                image: '../../../shared/assets/product-sample.jpg'
            },
            {
                id: 'PRD202501002',
                name: '云南大理丽江5日游',
                subtitle: '大理古城+丽江古城+玉龙雪山',
                category: { main: '国内游', sub: '西南线 / 云南' },
                price: 2580,
                inventory: { current: 8, total: 30, status: 'warning' },
                status: 'warning',
                sales: { count: 89, trend: '-5%' },
                image: '../../../shared/assets/product-sample.jpg'
            },
            {
                id: 'PRD202501003',
                name: '泰国曼谷芭提雅6日游',
                subtitle: '大皇宫+水上市场+芭提雅海滩',
                category: { main: '出境游', sub: '东南亚 / 泰国' },
                price: 3980,
                inventory: { current: 0, total: 25, status: 'danger' },
                status: 'danger',
                sales: { count: 234, trend: '+28%' },
                image: '../../../shared/assets/product-sample.jpg'
            }
        ],
        total: 156,
        currentPage: 1,
        pageSize: 20
    };
}

/**
 * 渲染产品表格
 */
function renderProductTable(data) {
    const tableBody = document.getElementById('productTableBody');
    if (!tableBody) return;
    
    tableBody.innerHTML = data.data.map(product => createProductRow(product)).join('');
    
    console.log(`渲染了 ${data.data.length} 个产品`);
}

/**
 * 创建产品行
 */
function createProductRow(product) {
    const statusConfig = getStatusConfig(product.status);
    const categoryConfig = getCategoryConfig(product.category.main);
    
    return `
        <tr class="product-row">
            <td>
                <input type="checkbox" class="form-checkbox product-checkbox" value="${product.id}">
            </td>
            <td class="product-image">
                <img src="${product.image}" alt="产品图片" class="product-thumb">
            </td>
            <td class="product-info">
                <div class="product-name">${product.name}</div>
                <div class="product-code">${product.id}</div>
                <div class="product-subtitle">${product.subtitle}</div>
            </td>
            <td class="product-category">
                <span class="category-badge ${categoryConfig.class}">${product.category.main}</span>
                <div class="category-detail">${product.category.sub}</div>
            </td>
            <td class="product-price">
                <div class="price-main">¥${product.price.toLocaleString()}</div>
                <div class="price-detail">成人价</div>
            </td>
            <td class="product-inventory">
                <div class="inventory-info">
                    <span class="inventory-number ${product.inventory.status === 'warning' ? 'warning' : product.inventory.status === 'danger' ? 'danger' : ''}">${product.inventory.current}</span>
                    <div class="inventory-progress">
                        <div class="progress-bar">
                            <div class="progress-fill ${product.inventory.status === 'warning' ? 'warning' : product.inventory.status === 'danger' ? 'danger' : ''}" 
                                 style="width: ${(product.inventory.current / product.inventory.total * 100)}%"></div>
                        </div>
                    </div>
                </div>
            </td>
            <td class="product-status">
                <span class="status-badge ${statusConfig.class}">${statusConfig.text}</span>
            </td>
            <td class="product-sales">
                <div class="sales-number">${product.sales.count}人</div>
                <div class="sales-trend ${product.sales.trend.startsWith('+') ? 'positive' : 'negative'}">${product.sales.trend}</div>
            </td>
            <td class="product-actions">
                <div class="action-buttons">
                    <button class="btn-icon" title="查看详情" onclick="viewProduct('${product.id}')">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button class="btn-icon" title="编辑产品" onclick="editProduct('${product.id}')">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn-icon" title="价格管理" onclick="openPricingModal('${product.id}')">
                        <i class="fas fa-dollar-sign"></i>
                    </button>
                    <button class="btn-icon" title="库存管理" onclick="openInventoryModal('${product.id}')">
                        <i class="fas fa-boxes"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn-icon dropdown-toggle" title="更多操作">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item" onclick="copyProduct('${product.id}')">复制产品</a>
                            <a href="#" class="dropdown-item" onclick="recommendProduct('${product.id}')">产品推荐</a>
                            <a href="#" class="dropdown-item" onclick="showSalesReport('${product.id}')">销售报告</a>
                            <div class="dropdown-divider"></div>
                            <a href="#" class="dropdown-item text-red" onclick="deleteProduct('${product.id}')">删除产品</a>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    `;
}

/**
 * 获取状态配置
 */
function getStatusConfig(status) {
    const configs = {
        'active': { class: 'active', text: '正常销售' },
        'warning': { class: 'warning', text: '库存紧张' },
        'danger': { class: 'danger', text: '已售罄' },
        'paused': { class: 'secondary', text: '暂停销售' },
        'coming': { class: 'primary', text: '即将上线' },
        'discontinued': { class: 'secondary', text: '已下架' }
    };
    return configs[status] || configs['active'];
}

/**
 * 获取分类配置
 */
function getCategoryConfig(category) {
    const configs = {
        '国内游': { class: 'primary' },
        '出境游': { class: 'secondary' },
        '周边游': { class: 'success' },
        '定制游': { class: 'warning' }
    };
    return configs[category] || configs['国内游'];
}

/**
 * 切换全选
 */
function toggleSelectAll(checked) {
    console.log('切换全选:', checked);
    
    const checkboxes = document.querySelectorAll('.product-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = checked;
        updateProductSelection(checkbox.value, checked);
    });
}

/**
 * 更新产品选择
 */
function updateProductSelection(productId, selected) {
    if (selected) {
        ProductModule.selectedProducts.add(productId);
    } else {
        ProductModule.selectedProducts.delete(productId);
    }
    
    // 更新批量操作区域
    updateBatchActions();
    
    // 更新全选状态
    updateSelectAllState();
}

/**
 * 更新批量操作区域
 */
function updateBatchActions() {
    const batchActions = document.getElementById('batchActions');
    const selectedCount = document.getElementById('selectedCount');
    
    if (batchActions && selectedCount) {
        const count = ProductModule.selectedProducts.size;
        selectedCount.textContent = count;
        
        if (count > 0) {
            batchActions.style.display = 'flex';
        } else {
            batchActions.style.display = 'none';
        }
    }
}

/**
 * 更新全选状态
 */
function updateSelectAllState() {
    const selectAllCheckbox = document.getElementById('selectAll');
    const allCheckboxes = document.querySelectorAll('.product-checkbox');
    
    if (selectAllCheckbox && allCheckboxes.length > 0) {
        const checkedCount = document.querySelectorAll('.product-checkbox:checked').length;
        
        if (checkedCount === 0) {
            selectAllCheckbox.indeterminate = false;
            selectAllCheckbox.checked = false;
        } else if (checkedCount === allCheckboxes.length) {
            selectAllCheckbox.indeterminate = false;
            selectAllCheckbox.checked = true;
        } else {
            selectAllCheckbox.indeterminate = true;
            selectAllCheckbox.checked = false;
        }
    }
}

/**
 * 切换下拉菜单
 */
function toggleDropdown(dropdown) {
    // 关闭其他下拉菜单
    document.querySelectorAll('.dropdown.active').forEach(item => {
        if (item !== dropdown) {
            item.classList.remove('active');
        }
    });
    
    // 切换当前下拉菜单
    dropdown.classList.toggle('active');
}

/**
 * 关闭所有下拉菜单
 */
function closeAllDropdowns() {
    document.querySelectorAll('.dropdown.active').forEach(dropdown => {
        dropdown.classList.remove('active');
    });
}

/**
 * 显示表格加载状态
 */
function showTableLoading() {
    const tableBody = document.getElementById('productTableBody');
    if (tableBody) {
        tableBody.innerHTML = `
            <tr>
                <td colspan="9" style="text-align: center; padding: 40px;">
                    <div style="color: var(--label-secondary);">
                        <i class="fas fa-spinner fa-spin" style="margin-right: 8px;"></i>
                        正在加载产品数据...
                    </div>
                </td>
            </tr>
        `;
    }
}

/**
 * 隐藏表格加载状态
 */
function hideTableLoading() {
    // 加载状态会被实际数据替换，这里不需要额外操作
}

/**
 * 更新分页
 */
function updatePagination(total) {
    ProductModule.pagination.total = total;
    
    // 更新分页信息
    const paginationInfo = document.querySelector('.pagination-info');
    if (paginationInfo) {
        const { currentPage, pageSize } = ProductModule.pagination;
        const start = (currentPage - 1) * pageSize + 1;
        const end = Math.min(currentPage * pageSize, total);
        paginationInfo.textContent = `显示 ${start}-${end} 条，共 ${total} 条记录`;
    }
    
    console.log('分页已更新:', ProductModule.pagination);
}

/**
 * 加载模态框组件
 */
async function loadModalComponents() {
    console.log('加载模态框组件...');
    
    try {
        // 加载价格管理模态框
        await loadModal('pricing-modal.html', 'pricing-modal-container');
        
        // 加载库存管理模态框
        await loadModal('inventory-modal.html', 'inventory-modal-container');
        
        console.log('模态框组件加载完成');
    } catch (error) {
        console.error('加载模态框组件失败:', error);
    }
}

/**
 * 加载模态框
 */
async function loadModal(modalFile, containerId) {
    try {
        const response = await fetch(`../components/${modalFile}`);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const html = await response.text();
        const container = document.getElementById(containerId);
        
        if (container) {
            container.innerHTML = html;
            console.log(`已加载模态框: ${modalFile}`);
        } else {
            console.warn(`容器不存在: ${containerId}`);
        }
    } catch (error) {
        console.error(`加载模态框失败 ${modalFile}:`, error);
    }
}

/**
 * 关闭所有模态框
 */
function closeAllModals() {
    document.querySelectorAll('.modal-overlay.show').forEach(overlay => {
        overlay.classList.remove('show');
    });
}

// =================================================================
// 产品操作函数
// =================================================================

/**
 * 查看产品详情
 */
function viewProduct(productId) {
    console.log('查看产品详情:', productId);
    
    // 这里应该跳转到产品详情页面或打开详情模态框
    // 暂时显示提示
    showNotification('功能开发中：查看产品详情', 'info');
}

/**
 * 编辑产品
 */
function editProduct(productId) {
    console.log('编辑产品:', productId);
    
    // 这里应该打开产品编辑表单
    showNotification('功能开发中：编辑产品', 'info');
}

/**
 * 打开价格管理模态框
 */
function openPricingModal(productId) {
    console.log('打开价格管理模态框:', productId);
    
    const overlay = document.getElementById('pricingModalOverlay');
    if (overlay) {
        overlay.classList.add('show');
        
        // 初始化价格管理标签页
        initPricingTabs();
    } else {
        console.error('价格管理模态框未找到');
        showNotification('模态框加载失败，请刷新页面重试', 'error');
    }
}

/**
 * 关闭价格管理模态框
 */
function closePricingModal() {
    console.log('关闭价格管理模态框');
    
    const overlay = document.getElementById('pricingModalOverlay');
    if (overlay) {
        overlay.classList.remove('show');
    }
}

/**
 * 保存价格设置
 */
function savePricingSettings() {
    console.log('保存价格设置');
    
    // 这里应该收集表单数据并提交到服务器
    showNotification('价格设置已保存', 'success');
    closePricingModal();
}

/**
 * 打开库存管理模态框
 */
function openInventoryModal(productId) {
    console.log('打开库存管理模态框:', productId);
    
    const overlay = document.getElementById('inventoryModalOverlay');
    if (overlay) {
        overlay.classList.add('show');
        
        // 初始化库存管理标签页
        initInventoryTabs();
    } else {
        console.error('库存管理模态框未找到');
        showNotification('模态框加载失败，请刷新页面重试', 'error');
    }
}

/**
 * 关闭库存管理模态框
 */
function closeInventoryModal() {
    console.log('关闭库存管理模态框');
    
    const overlay = document.getElementById('inventoryModalOverlay');
    if (overlay) {
        overlay.classList.remove('show');
    }
}

/**
 * 保存库存设置
 */
function saveInventorySettings() {
    console.log('保存库存设置');
    
    // 这里应该收集表单数据并提交到服务器
    showNotification('库存设置已保存', 'success');
    closeInventoryModal();
}

/**
 * 复制产品
 */
function copyProduct(productId) {
    console.log('复制产品:', productId);
    showNotification('功能开发中：复制产品', 'info');
}

/**
 * 推荐产品
 */
function recommendProduct(productId) {
    console.log('推荐产品:', productId);
    showNotification('功能开发中：产品推荐', 'info');
}

/**
 * 显示销售报告
 */
function showSalesReport(productId) {
    console.log('显示销售报告:', productId);
    showNotification('功能开发中：销售报告', 'info');
}

/**
 * 删除产品
 */
function deleteProduct(productId) {
    console.log('删除产品:', productId);
    
    if (confirm('确定要删除这个产品吗？此操作不可撤销。')) {
        // 这里应该调用删除API
        showNotification('产品已删除', 'success');
        
        // 重新加载数据
        loadProductData();
    }
}

/**
 * 导出产品
 */
function exportProducts() {
    console.log('导出产品');
    showNotification('正在导出产品数据...', 'info');
    
    // 模拟导出过程
    setTimeout(() => {
        showNotification('产品数据导出完成', 'success');
    }, 2000);
}

/**
 * 打开创建产品模态框
 */
function openCreateProductModal() {
    console.log('打开创建产品模态框');
    showNotification('功能开发中：创建新产品', 'info');
}

// =================================================================
// 标签页管理
// =================================================================

/**
 * 初始化价格管理标签页
 */
function initPricingTabs() {
    const tabBtns = document.querySelectorAll('.pricing-tabs .tab-btn');
    const tabPanes = document.querySelectorAll('.pricing-tabs .tab-pane');
    
    tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            switchTab(tabBtns, tabPanes, targetTab);
        });
    });
}

/**
 * 初始化库存管理标签页
 */
function initInventoryTabs() {
    const tabBtns = document.querySelectorAll('.inventory-tabs .tab-btn');
    const tabPanes = document.querySelectorAll('.inventory-tabs .tab-pane');
    
    tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            switchTab(tabBtns, tabPanes, targetTab);
        });
    });
}

/**
 * 切换标签页
 */
function switchTab(tabBtns, tabPanes, targetTab) {
    // 更新按钮状态
    tabBtns.forEach(btn => {
        btn.classList.toggle('active', btn.getAttribute('data-tab') === targetTab);
    });
    
    // 更新面板状态
    tabPanes.forEach(pane => {
        pane.classList.toggle('active', pane.id === targetTab || pane.id.includes(targetTab));
    });
}

// =================================================================
// 通知系统
// =================================================================

/**
 * 显示通知
 */
function showNotification(message, type = 'info', duration = 3000) {
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.innerHTML = `
        <div class="notification-content">
            <i class="fas fa-${getNotificationIcon(type)}"></i>
            <span>${message}</span>
        </div>
        <button class="notification-close" onclick="this.parentElement.remove()">
            <i class="fas fa-times"></i>
        </button>
    `;
    
    // 添加样式
    Object.assign(notification.style, {
        position: 'fixed',
        top: '20px',
        right: '20px',
        zIndex: '9999',
        minWidth: '300px',
        padding: '12px 16px',
        backgroundColor: getNotificationColor(type),
        color: 'white',
        borderRadius: '8px',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        transform: 'translateX(100%)',
        transition: 'transform 0.3s ease-out'
    });
    
    // 添加到页面
    document.body.appendChild(notification);
    
    // 显示动画
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 10);
    
    // 自动移除
    if (duration > 0) {
        setTimeout(() => {
            notification.style.transform = 'translateX(100%)';
            setTimeout(() => {
                if (notification.parentElement) {
                    notification.remove();
                }
            }, 300);
        }, duration);
    }
}

/**
 * 获取通知图标
 */
function getNotificationIcon(type) {
    const icons = {
        success: 'check-circle',
        error: 'exclamation-circle',
        warning: 'exclamation-triangle',
        info: 'info-circle'
    };
    return icons[type] || icons.info;
}

/**
 * 获取通知颜色
 */
function getNotificationColor(type) {
    const colors = {
        success: '#34C759',
        error: '#FF3B30',
        warning: '#FF9500',
        info: '#007AFF'
    };
    return colors[type] || colors.info;
}

// =================================================================
// 工具函数
// =================================================================

/**
 * 防抖函数
 */
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

/**
 * 节流函数
 */
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    }
}

// 导出模块（如果使用ES6模块）
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        ProductModule,
        initProductManagement,
        openPricingModal,
        closePricingModal,
        openInventoryModal,
        closeInventoryModal
    };
}